<template>
  <div class="opinion-list">
    <div class="comment-header">
      <h3>评论</h3>
      <el-button type="primary" size="small" @click="showCommentInput = true" v-if="!showCommentInput">
        <el-icon><Plus /></el-icon> 添加评论
      </el-button>
    </div>

    <!-- 评论输入框 -->
    <div class="comment-input" v-if="showCommentInput">
      <el-input v-model="comment" type="textarea" :placeholder="props.placeholder" :rows="3" maxlength="500" show-word-limit />
      <div class="comment-actions">
        <div class="action-buttons">
          <el-button size="small" @click="showCommentInput = false">取消</el-button>
          <el-button type="primary" size="small" @click="onSubmit" :loading="submitting">提交评论</el-button>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="comment-list" v-if="comments.length > 0">
      <div v-for="item in comments" :key="item._id" class="comment-item">
        <div class="comment-avatar">
          <user-avatar
            :image-id="userPicIdRender(item.optUser, userList)"
            :username="userNameRender(item.optUser, userList)"
          ></user-avatar>
        </div>
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-author">{{ userNameRender(item.optUser, userList) }}</span>
            <span class="comment-time">{{ useTime(item.optDate).nowTime.value }}</span>
          </div>
          <div class="comment-text">{{ item.optInfo }}</div>
        </div>
      </div>
    </div>
    <div v-else class="no-comments">暂无评论，快来发表第一条评论吧！</div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import apiService from "@/api/services/apiService";
import { Comment } from "@/api/types/base";
import { useUserStore } from "@/stores/modules/user";
import { BusinessType } from "@/enums/sysEnum";
import { userNameRender, userPicIdRender } from "@/hooks/useTextRender";
import { useTime } from "@/hooks/useTime";
import { useDataStore } from "@/stores/modules/data";
import userAvatar from "@/components/application/userAvatar/user-avatar.vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const dataStore = useDataStore();
const userStore = useUserStore();
const comments = ref<Comment[]>([]);
const comment = ref<string>("");
const submitting = ref(false);
const showCommentInput = ref(false);

const userList = computed(() => dataStore.userList);

interface SelectFilterProps {
  businessId?: string;
  businessType?: BusinessType;
  placeholder?: string;
}
const props = withDefaults(defineProps<SelectFilterProps>(), {
  placeholder: "请输入您的评论"
});

// 获取评论数据
const getDataList = async () => {
  if (props.businessId) {
    let { data } = await apiService.find<Comment[]>("comment", { businessId: props.businessId }, { sort: { optDate: -1 } });
    comments.value = data;
  }
};

onMounted(() => {
  dataStore.findUserList();
});

// 监听 businessId 变化，重新加载评论数据
watch(
  () => props.businessId,
  () => {
    getDataList();
  },
  { immediate: true }
);

const onSubmit = async () => {
  if (!comment.value.trim()) {
    ElMessage.warning("请输入评论内容");
    return;
  }

  if (props.businessId) {
    submitting.value = true;
    try {
      let curdata: Comment = {
        businessId: props.businessId,
        businessType: props.businessType,
        optUser: userStore.userInfo._id,
        optDate: new Date(),
        optInfo: comment.value
      };
      let { data } = await apiService.save<Comment>("comment", curdata);
      comments.value.unshift(data);
      comment.value = "";
      showCommentInput.value = false;
      ElMessage.success("评论发表成功");
    } catch (error) {
      console.error("发表评论失败:", error);
      ElMessage.error("发表评论失败");
    } finally {
      submitting.value = false;
    }
  }
};
</script>

<style scoped lang="scss">
.opinion-list {
  padding: 15px;
  .comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .comment-input {
    margin-bottom: 20px;
    .comment-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      .action-buttons {
        display: flex;
        gap: 10px;
      }
    }
  }
  .comment-list {
    .comment-item {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      &:last-child {
        border-bottom: none;
      }
      .comment-avatar {
        flex: 0 0 40px;
        margin-right: 10px;
      }
      .comment-content {
        flex: 1;
        .comment-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          .comment-author {
            font-weight: 600;
            color: #303133;
          }
          .comment-time {
            font-size: 12px;
            color: #909399;
          }
        }
        .comment-text {
          margin-bottom: 8px;
          line-height: 1.5;
        }
      }
    }
  }
  .no-comments {
    padding: 20px 0;
    color: #909399;
    text-align: center;
  }
}
</style>
